<template>
  <div class="a">
    <div class="top">
      <div class="time">
        <span>时间</span>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="sc">
        <span>时次</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="sx">
        <span>时效</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="lx">
        <span>类型</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <el-checkbox v-model="checked" style="margin: 10px auto"
        >是否累加</el-checkbox
      >
      <el-button type="small">地图查看</el-button>
      <div class="btns">
        <el-button type="small">{{ "<<" }}</el-button>
        <el-button type="small">{{ ">>" }}</el-button>
      </div>
    </div>
    <div class="bottom">
      <el-radio v-model="radio" label="1">采用自动分级设置</el-radio>
      <div class="sjs">
        <span>分级数</span> <el-input type="number"></el-input>
      </div>
      <div class="jzs">
        <span>基准色</span><el-input type="color"></el-input>
      </div>
      <el-radio v-model="radio" label="1">国标分级</el-radio>
      <el-radio v-model="radio" label="1">自定义分级</el-radio>
      <el-button type="small">等值线设置</el-button>
      <div class="btns">
        <el-button type="small">显示</el-button>
        <el-button type="small">清除</el-button>
        <el-button type="small">显示图例</el-button>
        <el-button type="small">清除图例</el-button>
        <el-button type="small">显示格点</el-button>
        <el-button type="small">清除格点</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleNodeClick() {},
  },
};
</script>
<style scoped lang="less">
.a {
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  .top {
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #dedede;
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      margin-right: 10px;
    }
    .time,
    .sc,
    .sx,
    .lx,
    .btns {
      margin-top: 10px;
    }
  }
  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .el-input {
      width: 250px;
    }
    .sjs,
    .jzs {
      display: flex;
      align-items: center;
      margin: 10px auto;
      span {
        margin-right: 10px;
      }
    }
    .el-radio {
      margin: 10px auto;
    }
    .el-button {
      width: 100px;
    }
    .btns {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      .el-button {
        margin: 5px;
      }
    }
  }
}
</style>
